<template>
  <div class="columnChart">
    <div class="main"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import loginAPI from "../../api/basicfunction/basiclogin/loginAPI";

export default {
  name: 'columnChart',
  data() {
    return {
      legendArr: [],
      color: this.$store.state.color,
      key: [],
      value: []
    }
  },
  methods: {
    init() {
      this.legendArr = this.myChart.getOption().series
      this.legendArr.forEach((data) => {
        data.selected = true;
      })
      window.addEventListener('resize', function () {
        this.myChart.resize()
      }.bind(this))
    }
  },
  mounted() {
    loginAPI.getData().then(({data}) => {
        Object.keys(data.data.orderSum).forEach(item => {
          this.key.push(item)
        })
        Object.values(data.data.orderSum).forEach(item => {
          this.value.push(item)
        })
        this.myChart = echarts.init(document.querySelector('.columnChart .main'));
        this.myChart.setOption({
          title: {
            show: false
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: false
          },
          toolbox: {
            show: false
          },
          color: this.color,
          calculable: true,
          xAxis: [{
            type: 'category',
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.69)'
            },
            axisLabel: {
              textStyle: {
                color: 'white'
              }
            },
            data: this.key
          }],
          yAxis: [{
            axisLine: {
              show: false
            },
            nameLocation: 'end',
            nameGap: 20,
            nameRotate: 0,
            axisTick: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: ['rgba(230, 230, 230, 0.2)']
              }
            },
            axisLabel: {
              textStyle: {
                color: 'white',
                fontSize: 14
              }
            },
            type: 'value',
            nameTextStyle: {
              color: 'rgba(255, 255, 255, 0.69)'
            }
          }],
          series: [{
            name: '订单总量',
            type: 'bar',
            data: this.value,
            barWidth: 16,
            barGap: 0
          }]
        });
        this.init()
      }
    )
  }
}
</script>

<style>
.columnChart {
  height: 315px;
  color: white;
}

.columnChart .main {
  height: calc(100% - 10px);
  width: 100%;
  margin-left: 30px;
  margin-top: -50px;
}
</style>
